<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <div class="containes" v-if="column.display">
    <!-- 头部 -->
    <div class="header">
      <div class="headerleft">
        <div class="tybox" v-for="(item, index) in menuList" :key="index">
          <div :style="item.styleClass" class="selecttype"></div>
          <div class="text">{{ item.label }}</div>
        </div>
      </div>
      <div class="headerright"></div>
    </div>
    <!-- 日历部分 -->
    <div
      class="calendar"
      :style="'grid-template-columns:' + columnStyle.width + 'px 9fr;'"
    >
      <div class="calendarleft">
        <div
          class="ctop"
          :style="
            'width:' +
            columnStyle.width +
            'px;height:' +
            rowStyle.height +
            'px;'
          "
        >
          {{ columnName }}/{{ rowName }}
        </div>
        <div
          class="cbottom"
          ref="columnRef"
          @scroll="columnScroll()"
          @mouseover="changeFlag(false)"
          :style="'height:' + tableStyle.height + 'px'"
        >
          <!-- 时间 -->
          <div
            v-for="(item, index) in columnData"
            class="week"
            :key="index"
            :style="
              'width:' +
              columnStyle.width +
              'px;height:' +
              columnStyle.height +
              'px;'
            "
          >
            <div style="font-size: 14px">{{ item.label }}</div>
          </div>
        </div>
      </div>
      <div class="calendarright">
        <div class="crtop">
          <div
            v-for="(item, index) in rowData"
            :key="index"
            class="rdate"
            :style="
              'width:' + rowStyle.width + 'px;height:' + rowStyle.height + 'px;'
            "
          >
            <div style="font-size: 12px">{{ item.label }}</div>
          </div>
        </div>
        <div
          class="content-box"
          @scroll="contentScroll()"
          @mouseover="changeFlag(true)"
          ref="contentRef"
          :style="
            'width:' +
            contentData.length * (rowStyle.width + 2) +
            'px;height:' +
            tableStyle.height +
            'px'
          "
        >


          <!-- 日历内容 -->
          <div v-for="(item, index) in contentData" :key="index"  >

            <div
              v-for="(it, ind) in item.column"
              :key="ind"
              @click="selectCalendar(item, it)"
              :class="{
                box: true,
                selecolor:  it.type == selectedIndexDef,
                disColor: it.type == 1,
                reservedColor: it.type == 2,
              }"
              :style="
                'width:' +
                tableStyle.colWidth +
                'px;height:' +
                tableStyle.colHeight +
                'px;'
              "
            >
              <span v-if="it.type !== 1 && it.type !== 2"  v-show="!column.readonly">可预约</span>
              <span v-if="it.type == 2" class="resColor">已预订</span>
              <span v-if="it.type == 1" >{{ it.createrName||'' }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog
      :title="(!column.readonly&&selectColumnDate.type!=1)?(showTypeIndex>=0?'取消预约':'预约'):'查看'"
      v-model="dialogVisible"
      width="20%"
      :before-close="handleClose"
    >
      <div class="dialog-box">
        <div class="item">
          <div class="name">申请人：</div>
          <div>{{ selectColumnDate.createrName|| viewFormData.param.displayName.pvalue}}</div>
        </div>
        <div class="item">
          <div class="name">{{ rowName }}：</div>
          <div>{{ selectRowDate.label }}</div>
        </div>
        <div class="item">
          <div class="name">{{ columnName }}：</div>
          <div>{{ selectColumnDate.label }}</div>
        </div>
        <div v-if="additionalData.length">
          <div
            class="item"
            v-for="(item, index) in additionalData"
            :key="index"
          >
            <div class="name">{{ item.label }}：</div>
            <div>{{ item.value }}</div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" v-if="!column.readonly && selectColumnDate.type!=1" @click="sumbitSelected"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {convertHtmlByParam, httpCallApi} from "@framework-core/utils/util";
import website from "@framework-core/config/website";
import {queryOrders} from "@/framework-admin/api/code/formmodel";


export default {
  name:'yuyueform',
  props: ['column', 'modelValue'],
  inject: ['viewFormData'],
  mounted() {
    this.getData()
    //console.error("------------",this.column, this.viewFormData)
  },

  watch: {
    'column.reloadDataFlg'(val) {
      this.getData();
    }
  },
  data() {
    return {
      selectedIndexDef:-99,
      showTypeIndex:-1,
      freeze: 'row', //冻结模式，row-行，column-列
      dialogVisible: false, //打开预约弹窗
      rowName: this.column.rowOption.title,
      columnName:this.column.columnOption.title,
      selectRowDate: {}, //选中的行数据
      selectColumnDate: {}, //选中的列数据
      rowStyle: {
        width: this.column.rowStyleWidth,
        height: this.column.rowStyleHeight,
      }, //首行样式
      columnStyle: {
        width: this.column.columnStyleWidth,
        height: this.column.columnStyleHeight,
      }, //首列样式
      tableStyle: {
        height: this.column.tableStyleHeight, //内容高度
        colWidth:  this.column.rowStyleWidth,
        colHeight:  this.column.columnStyleHeight,
      }, //table的样式

      menuList: [
        {
          label: '已预订',
          styleClass: { backgroundColor: this.column.reserveColor },
        },
        {
          label: '当前选择',
          styleClass: { backgroundColor: this.column.selectColor },
        },
        {
          label: '空闲',
          styleClass: { border: '1px solid #eeeeee' },
        },
        {
          label: '不可预订',
          styleClass: { backgroundColor: this.column.unableColor },
        },
      ], //颜色块
      additionalData: [

      ], // 预约附加属性字段
      rowData: [], //行
      rowDataMap:{},
      columnData: [], //列
      columnDataMap:{},
      //不可选或已预订 1 不可预定 2 已预定 -99 当前选择
      occupationList: [],

      contentData: [], //内容
      seleArr: [], //选中的块
      flag: false,
    }
  },
  methods: {
    getData(){

      if(this.column.rowOption.type ==1){
        this.rowData = this.column.rowOption.data;
      }else {
        let column1 = {};
        column1.dicUrl = convertHtmlByParam(this.column.rowOption.url,this.viewFormData,this.$route.query);
        column1.dicMethod = this.column.rowOption.method;
        column1.contentType = this.column.rowOption.contentType;
        column1.dicFormatterJs = this.column.rowOption.formatterJs;
        this.rowData = httpCallApi(column1,{});
      }

      if(this.column.columnOption.type ==1){
        this.columnData = this.column.columnOption.data;
      }else{
        let column1 = {};
        column1.dicUrl = convertHtmlByParam(this.column.columnOption.url,this.viewFormData,this.$route.query);
        column1.dicMethod = this.column.columnOption.method;
        column1.contentType = this.column.columnOption.contentType;
        column1.dicFormatterJs = this.column.columnOption.formatterJs;
        this.columnData = httpCallApi(column1,{});
      }

      if(this.rowData){
         for(let ind=0;ind<this.rowData.length;ind++){
           this.rowDataMap[this.rowData[ind].value] = this.rowData[ind]
         }
      }

      if(this.columnData){
        for(let ind=0;ind<this.columnData.length;ind++){
          this.columnDataMap[this.columnData[ind].value] = this.columnData[ind]
        }
      }

      if(this.column.dataOption.type ==1){
        this.occupationList = this.column.dataOption.data;
        this.occupationList[0].type = Math.random()>0.5?1:2;
        this.occupationList[1].type =Math.random()>0.5?1:2;
        this.occupationList[2].type = Math.random()>0.5?1:2;
         this.occupationList[3].type =  Math.random()>0.5?1:2;
      }else {
        let linkdata1 = "";
        let linkdata2 = "";
        let links = this.column.yuyueLinks;
        if (links) {
          if(links.length>0){
            linkdata1 =  this.viewFormData.form[links[0]];
            if(!linkdata1){
              this.occupationList = [];
              this.Rendering()
              return
            }
          }
          if(links.length>1){
            linkdata2 =  this.viewFormData.form[links[1]];
            if(!linkdata2){
              this.occupationList = [];
              this.Rendering()
              return
            }
          }
        }

        let query = {};
        query.orderCode = this.column.orderCode
        //query.formDataId = this.$route.query.dataId
        if(linkdata1){
          query.linkdata1 =linkdata1
        }
        if(linkdata2){
          query.linkdata2 =linkdata2
        }
        let $that = this;
        queryOrders(query).then((res) => {
          if(res.data.data && res.data.data.data){
            $that.occupationList = res.data.data.data;
          }else{
            $that.occupationList = [];
          }
          $that.Rendering()
        })
            .catch((err) => {
              $that.$message.error(err.msg || err.message)
            })
            .finally(() => {
            });
      }
      this.Rendering()
    },
    changeFlag(flag) {
      this.flag = flag
    },
    // 左右滚动条滚动同步
    columnScroll() {
      if (!this.flag) {
        this.$nextTick(() => {
          this.$refs.contentRef.scrollTop = this.$refs.columnRef.scrollTop
        })
      }
    },
    contentScroll() {
      if (this.flag) {
        this.$refs.columnRef.scrollTop = this.$refs.contentRef.scrollTop
      }
    },
    // 渲染
    Rendering() {
      this.contentData =[]
      this.rowData.forEach((v) => {
        let obj = { ...v, column: JSON.parse(JSON.stringify(this.columnData)) }
        this.contentData.push(obj)
      })
      this.RenderingSelected();

    },
    RenderingSelected() {
      // if (!this.occupationList.length) {
      //   return
      // }
      let dataMap = {};
      this.occupationList.forEach((o) => {
        dataMap[o.rowId+"_"+o.columnId] = o;
      })
      let nowDate = new Date();
      for (let i = 0; i < this.contentData.length; i++) {
        let rowData = this.contentData[i];
        let columns = rowData.column
        for (let j = 0; j < columns.length; j++) {
          let t = dataMap[rowData.value+"_"+columns[j].value];
          if(t){
            columns[j].type = t.type
            columns[j].createrName = t.createrName
          }else{
            if(this.column.isTime>0 ){
               if(this.column.timeType=='1' && this.column.linkDate){
                 let yyyyMMdd = this.viewFormData.form[this.column.linkDate];
                 let hhmm = "";
                 if(this.column.isTime==1){
                   hhmm = this.rowDataMap[rowData.value].label;
                 }else{
                   hhmm = this.columnDataMap[columns[j].value].label;
                 }
                 let targetDate = new Date(yyyyMMdd+" "+hhmm);
                 let timePre = this.column.timePre;
                 if(!timePre){
                   timePre = 0;
                 }
                 if( (targetDate.getTime() - nowDate.getTime())/1000<timePre){
                   columns[j].type = 1
                 }
               }
            }
          }
        }
      }
    },

    // 点击选择
    selectCalendar(item, ite) {
      if(this.viewFormData.option.detail){
        return;
      }
      //
      let links = this.column.yuyueLinks;
      if (links) {
        if (links.length > 0) {
          let linkdata1 = this.viewFormData.form[links[0]];
          if (!linkdata1) {
            this.$message.error(this.viewFormData.columnListMap[links[0]].label+"数据为空");
            return;
          }
        }
        if (links.length > 1) {
          let linkdata2 = this.viewFormData.form[links[1]];
          if (!linkdata2) {
            this.$message.error(this.viewFormData.columnListMap[links[1]].label+"数据为空");
            return;
          }
        }
      }
      this.showTypeIndex = this.occupationList.findIndex(o => item.value== o.rowId && ite.value== o.columnId );
      if(this.column.isshowdialog){
        this.dialogVisible =true;
        this.selectRowDate = item;
        this.selectColumnDate = ite;
        return;
      }
      if(ite.type && ite.type==1){
        return
      }
      this.selectCalendarComm(item, ite);
    },
    sumbitSelected() {
      this.dialogVisible = false;
      if (this.selectRowDate && this.selectColumnDate && (!this.column.readonly)) {
        this.selectCalendarComm(this.selectRowDate, this.selectColumnDate);
      }
    },
    selectCalendarComm(item, ite) {
      // const hasIndex = this.occupationList.findIndex(o => item.value== o.rowId && ite.value== o.columnId );
      if (this.showTypeIndex >= 0) {
        this.occupationList.splice(this.showTypeIndex, 1);
        //alert(hasIndex+":"+ this.occupationList.length)
      } else {
        this.occupationList.push({rowId: item.value, columnId: ite.value, type: this.selectedIndexDef})
      }
      this.Rendering();



      let selectedItems = this.occupationList.filter(item => item.type === this.selectedIndexDef || item.type === 2);
      for (let idx =0 ;idx<selectedItems.length;idx++) {
        let selectedItem = selectedItems[idx];
        selectedItem.rowText = this.rowDataMap[selectedItem.rowId].label
        selectedItem.columnText = this.columnDataMap[selectedItem.columnId].label
      }
      this.$emit('update:modelValue', selectedItems);
    },
    handleClose() {
      this.dialogVisible = false
    },
  },
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  height: 50px;
  border-bottom: 1px solid #eeeeee;
  padding: 20px;
  .headerleft {
    height: 100%;
    display: flex;
    align-items: center;
    .tybox {
      display: flex;
      align-items: center;
      font-size: 16px;
      height: 30px;
      margin-left: 15px;
      // width:100px;
      .selecttype {
        height: 16px;
        width: 30px;
        // background-color: skyblue;
      }
      .text {
        margin-left: 10px;
      }
    }
  }
  .headerright {
    display: flex;
  }
}
.calendar {
  display: grid;
  grid-template-columns: 1fr 9fr;

  .calendarleft {
    height: 100%;
    .ctop {
      height: 60px;
      border: 1px solid #eeeeee;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .cbottom {
      // max-height: 200px;
      overflow-y: scroll;
      .week {
        display: flex;
        align-items: center;
        height: 40px;
        justify-content: center;
        border: 1px solid #eeeeee;
      }
    }
  }
  .calendarright {
    height: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    .crtop {
      display: -webkit-box;
      // grid-template-columns: repeat(10, 1fr);

      .rdate {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #eeeeee;
        text-align: center;
      }
    }
  }
}
.content-box {
  display: flex;
  // max-height: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
  .box {
    border: 1px solid #eee;
    height: 40px;
    width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    cursor: pointer;
  }

  .selecolor {
    background-color: #72bbff;
  }
  .disColor {
    background: #bbb;
    cursor: default;
  }
  .reservedColor {
    background: #1890ff;
    cursor: default;
    .resColor {
      color: #fff;
    }
  }
}
.dialog-box {
  margin: 0 20px;
  .item {
    display: flex;
    margin: 10px 0;
    .name {
      font-size: 14px;
      font-weight: bold;
    }
  }
}
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 1px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  //background-color: #8c8c8c;
  background-color: rgba(0, 0, 0, 0.25);
}

::-webkit-scrollbar-track {
  background-color: #f6f6f6;
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
  border: 0;
}
</style>
